<!DOCTYPE html>
<html>


<head>
    <!--引入公用模板-->
    <%- include ../taglib/layout-report.ejs %>
</head>
<body class="gray-bg">
<div class="wrapper wrapper-content" style="padding:5px">
    <div class="row animated fadeInDown">
        <div class="col-sm-3" id="mapleft">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <h5>设备数据</h5>
                </div>
                <div class="ibox-content">
                    <div class="row  pre-scrollable">
                        <div id='external-events'>
                            <ul id="kindTree" class="ztree">
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-9 clearfix" id="mapright" style="padding-left:5px">
            <div class="row">
                <div class="col-sm-12 " style="padding-left:5px;margin-top: 0px;margin-bottom: 0px">
                    <!--collapsed-->
                    <div class="ibox float-e-margins ">
                        <div class="ibox-title">
                            <h5>查询条件</h5>
                            <div class="ibox-tools">
                                <a class="collapse-link">
                                    <i class="fa fa-chevron-up"></i>
                                </a>
                            </div>
                        </div>
                        <div class="ibox-content">
                            <div class="row">
                                <form role="form" class="form-inline ">

                                    <label class="control-label">时间范围</label>
                                    <input placeholder="开始时间" class="laydate-icon form-control layer-date" id="start">
                                    <input placeholder="结束时间" class="laydate-icon form-control layer-date" id="end">
                                    <button type="button" class="btn btn btn-primary" onclick="setLadayTime(-1)"><i
                                                class="fa fa-search"></i> 昨天
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="setLadayTime(-2)"><i
                                                class="fa fa-search"></i> 近三天
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="setLadayTime(-6)"><i
                                                class="fa fa-search"></i> 近七天
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="query()"><i
                                                class="fa fa-search"></i> 搜索
                                    </button>
                                    <button type="button" class="btn btn btn-primary" onclick="outexcel()"><i
                                                class="fa  fa-file-excel-o"></i> 导出
                                    </button>

                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row animated fadeInDown">
                <div class="col-sm-12 clearfix" style="padding-left:5px;margin-top: 2px;margin-bottom: 0px">
                    <div class="ibox float-e-margins">
                        <div class="ibox-title">
                            <h5>报警统计图表</h5>
                        </div>
                        <div class="ibox-content">
                            <div class="flot-chart" style="min-width:400px;height:350px">
                                <div class="flot-chart-content" id="container"></div>
                            </div>
                        </div>
                    </div>
                    <div class="col-sm-12 clearfix " style="padding-left:5px;padding-right:1px;margin-top: 0px;margin-bottom: 0px">
                        <div class="ibox float-e-margins" >
                            <div class="ibox-title">
                                <div>
                                    <h5>
                                        报警统计列表
                                    </h5>
                                </div>
                                <div class="ibox-tools">
                                    <a class="collapse-link">
                                        <i class="fa fa-chevron-up"></i>
                                    </a>
                                </div>
                            </div>
                            <div class="ibox-content">
                                <div class="" id="">
                                    <div>
                                        <table id="example"
                                               class="table table-striped table-bordered table-hover dataTables-example">
                                            <thead>
                                            <tr>
                                                <!--<th>-->
                                                <!--</th>-->
                                                <th>id</th>
                                                <th width="200px">车牌号</th>
                                                <th>所属用户</th>
                                                <th>车主姓名</th>
                                                <th>报警类型</th>
                                                <th>报警时间</th>
                                                <th>报警详情</th>
                                                <th>处理状态</th>

                                            </tr>
                                            </thead>
                                            <tbody>
                                            </tbody>
                                        </table>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

            </div>
        </div>
    </div>
</div>
<!--<input type='button' text='dianji' onclick="play_sound()"/>-->
<input type="hidden" id="h_c_car_id">
<input type="hidden" id="h_all_car_id">
<%- include ../taglib/layout-content.ejs %>
<script type="text/javascript">
    var table;
    $(document).ready(function () {
        table = $('.dataTables-example').dataTable({
            "lengthChange": false,//是否允许用户自定义显示数量
//            "searching": false,//本地搜索
            "scrollY": true,//dt高度
            scrollX: true,
            "autoWidth": true,//自动宽度
            "dom": '<"top"<"clear">>rt<"bottom"ilp<"clear">>',
//            "lengthChange": false,//是否允许用户自定义显示数量
            "ajax": {
                "url": "/report/warninglist",
                "dataSrc": "rows"
            },
            serverSide: true,
            columns: [

                {"sClass": "text-center", data: 'baseCarNo',"bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'baseCarNo',"bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'deptName', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'userName', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'warningTypeName', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'warningTime', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'waringcontent', "bSortable": false, "orderable": false},
                {"sClass": "text-center", data: 'waringstateName', "bSortable": false, "orderable": false}

            ],
            //排序
            initComplete: function (setting, json) {
                //隐藏列
                visiblecolumn(table,0,false)
            },
        });
    });
    //    隐藏列
    function visiblecolumn(table, c, visible) {
        table.DataTable().column(c).visible(visible)
    }
//    /**
//     * 树刷新数据
//     */
//    function query() {
//        search_ztree('kindTree', 'serchStr');
//    }
    function setLadayTime(time) {
        $("#start").val(laydate.now(time) );
        $("#end").val(laydate.now() );

    }



</script>

<script type="text/javascript">
    $(document).ready(function () {

        var start = {
            elem: '#start',
            format: 'YYYY-MM-DD',
//            min: laydate.now(), //设定最小日期为当前日期
            max: '2999-06-16', //最大日期
//            start: laydate.now(),
//            start: laydate.now() + ' 00:00:00',
            istime: false,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                end.min = datas; //开始日选好后，重置结束日的最小日期
                end.start = datas //将结束日的初始值设定为开始日
            }
//            min: laydate.now(-1), //-1代表昨天，-2代表前天，以此类推
//            max: laydate.now(+1) //+1代表明天，+2代表后天，以此类推
        };
        var end = {
            elem: '#end',
            format: 'YYYY-MM-DD',
//            min: laydate.now(),
            max: '2999-06-16',
//            start: laydate.now() + ' 23:59:59',
            istime: false,
            istoday: false,
            festival: true, //是否显示节日
            choose: function (datas) {
                start.max = datas; //结束日选好后，重置开始日的最大日期
            }
        };
        laydate(start);
        laydate(end);
        $("#start").val(laydate.now());
        $("#end").val(laydate.now());
    })
</script>
<script type="text/javascript">
    var urlTree;
    var map="";
    $(function () {
        urlTree = '/tree/deptCar';
        init_tree('id', 'parentId', 'name', fnClick);
        loadMyTree(urlTree);

    });
    //    树节点选中
    var fnClick = function (event, treeId, treeNode) {
        selectTreeNode(treeNode);
    }

    //    复选框选中
    function selectTreeNode(treeNode) {
        var isCar = treeNode.isCar
        if (isCar) {
            $("#h_c_car_id").val(treeNode.id);
        }else{
            swal("系统提示", "请选择车辆查询!", "warning");

        }
    }

    //刷新数据
    function query() {
        var carId = $("#h_c_car_id").val();
        var start=$("#start").val();
        var end=$("#end").val();
        var jsonstr = [{"carId": carId},{"start": start},{"end": end}];
        if(carId){
            table.DataTable().search(JSON.stringify(jsonstr), false, false).draw();
            queryChart();
        }else{
            swal("系统提示", "请选择车辆查询!", "warning");
        }

    }
</script>
<script type="text/javascript">
    //    图表

    var categories=[];
    $(function () {
        var pieData=[]
        drawChartPieBase(categories,pieData);
    });
    function queryChart() {
        var carId = $("#h_c_car_id").val();
        var start=$("#start").val();
        var end=$("#end").val();
        $.ajax({
            type: "GET",
            url: "/report/warningchart",
            cache: false,
            async: false,
            dataType: "json",
            data: {
                carId: carId,
                start: start,
                end: end
            },
            success: function (data) {
                debugger;
                var pieData=data.data
                var categories=data.categories
                drawChartPieBase(categories,pieData);
            }
        });
    }
    function drawChartPieBase(categories,pieData) {
        chart = new Highcharts.Chart('container', {
            chart: {
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: '车辆报警分析'
            },
            tooltip: {
                headerFormat: '{series.name}<br>',
                pointFormat: '{point.name}: <b>{point.percentage:.1f}%</b>'
            },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                name: '车辆报警率',
                data:pieData
            }]
        });
    }
    function outexcel() {
        var carId = $("#h_c_car_id").val();
        var start=$("#start").val();
        var end=$("#end").val();
        var jsonstr = [{"carId": carId},{"start": start},{"end": end}];
        window.open("<%= serverurl%>/report/exportWarningExcel?carId="+carId+"&start="+start+"&end="+end)
    }
</script>
</body>
</html>
